<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
    	作者：zyl
    	时间：2017-05-26
    	描述：Bezier三次曲线
    	bezierCurveTo()
    	定义和用法
			bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
			提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。
			曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
			三次贝塞尔曲线
		
			提示：请查看 quadraticCurveTo() 方法。它有一个控制点，而不是两个。
			JavaScript 语法：
			context.moveTo(x0,y0);//开始点
			context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
			参数值				参数	描述
			
			cp1x		第一个贝塞尔控制点的 x 坐标
			cp1y		第一个贝塞尔控制点的 y 坐标
			cp2x		第二个贝塞尔控制点的 x 坐标
			cp2y		第二个贝塞尔控制点的 y 坐标
			x			结束点的 x 坐标
			y			结束点的 y 坐标
    -->
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
		</canvas>
	</body>
	<script>
		var canvas = document.getElementById("canvas");
				 canvas.width =800;
	            canvas.height =800;	 
	      var context = canvas.getContext("2d");//2d环境
	      
	      //练习
	   
			context.beginPath();
			context.moveTo(20,20);
			context.quadraticCurveTo(20,100,200,20);
			context.stroke();
	 /*  	  开始点：moveTo(20,20)   //20 20
			控制点：quadraticCurveTo(20,100,200,20)//20 100
			结束点：quadraticCurveTo(20,100,200,20) //200  20
			
	      */
	////////////////////////////////////////////////////////////////      
	      
	      //绿地
	      drawLand(context);
	      function drawLand(cxt){
	      	cxt.save();
	      	//设置形状
	      	cxt.beginPath();
	      	cxt.moveTo(0,600);
	      	cxt.bezierCurveTo(540,400,660,800,1200,600);//贝塞尔三次曲线
	      	cxt.lineTo(1200,800);
	      	cxt.lineTo(0,800);
	      	cxt.closePath();
	      	
	      	//设置渐变色
	      	var landStyle =cxt.createLinearGradient(0,800,0,0);//线性渐变
	      	landStyle.addColorStop(0.0,"#030");
	      	landStyle.addColorStop(1.0,"#580");
	      	cxt.fillStyle=landStyle;
	      	cxt.fill();
	      	cxt.restore();
	      	
	      }
	</script>
</html>
